<template>
  <el-container>
    <el-main>
      <el-collapse v-model="activeNames">
        <el-collapse-item
          title="信息列表"
          dialogFormVisible="false"
          name="activeName"
        >
          <el-table
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '0px' }"
            :data="tableContactData"
            border
            stripe
            style="width: 100%; font-size: 10px"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60px"
            ></el-table-column>
            <el-table-column prop="perName" label="联系人"></el-table-column>
            <el-table-column prop="phone" label="手机号码"> </el-table-column>
            <el-table-column prop="tel" label="固定电话"> </el-table-column>
            <el-table-column prop="work" label="联系人职务"> </el-table-column>
            <el-table-column label="操作" width="100">
              <!-- <el-button type="text" size="small" @click="deleteInfo()">删除</el-button> -->
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-main>
    <el-footer style="padding: 0">
      <el-button
        size="small"
        width="100"
        @click="dialogFormVisible = true"
        style="width: 100%"
        >新增</el-button
      >
      <el-dialog title="新增联系人" :visible.sync="dialogFormVisible">
        <el-form :model="formContactData">
          <el-form-item label="机构名称" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.instName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="机构Id" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.instId"
              autocomplete="off"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="联系人" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.perName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人职务" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.work"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="传真" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.note"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="QQ号" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.qq"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="微信" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.wx"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮政编码" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.zipCode"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="固定电话" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.tel"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="网址" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.web"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="Email" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.email"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="通讯地址" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.adrr"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input
              v-model="formContactData.note"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogVisibleConfirm();
              dialogFormVisible = false;
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "xx",
  data() {
    return {
      activeNames: ["activeName"],
      dialogFormVisible: false,
      // 联系方式-弹出对话框
      formContactData: {
        instId: "ZJ00000003",
        instName: "",
        perName: "",
        phone: "",
        work: "",
        fax: "",
        qq: "",
        wx: "",
        zipCode: "",
        tel: "",
        web: "",
        email: "",
        addr: "",
        note: "",
      },
      formLabelWidth: "120px",
      rules: {
        perName: [{ required: true, message: "请填写联系人", trigger: "blur" }],
        phone: [
          {
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
            len: 11,
          },
        ],
      },
      // tableContactData 联系方式列表信息
      tableContactData: [
        {
          perName: "辛凤凤",
          phone: "17545682315",
          tel: "0523-8888",
          work: "经理",
          detail: "详细信息",
        },
      ],
    };
  },
  created() {
    this.getAllCon();

    this.$axios({
      method: "get",
      url: "http://localhost:8001/se/person/pageContactInfo/1/10",
    })

      .then((result) => {
        console.log(result.data.data);
        console.log("请求基本信息成功！");
        this.tableBasicData = result.data.data.item;
      })
      .catch((err) => {
        console.log("请求基本信息失败！" + err);
      });
  },
  methods: {
    getAllCon() {
      this.$axios({
        method: "get",
        url: "http://localhost:8001/se/person/getAllContactInfo",
      })
        .then((result) => {
          console.log(result.data.data);
          console.log("请求信息列表成功！");
          this.tableContactData = result.data.data.item;
        })
        .catch((err) => {
          console.log("请求信息列表失败！" + err);
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index);
      console.log(row.perId);
      let id = row.perId;
      this.$axios({
        method: "delete",
        url: `http://localhost:8001/se/person/deleteContactInfoById/${id}`,
      })
        .then((result) => {
          console.log(result);
          console.log("请求删除机构信息成功！");
          // this.getDetailedInfo();
          this.getAllCon();
        })
        .catch((err) => {
          console.log("请求删除机构信息失败！" + err);
        });
    },

    // 新增联系人
    onhandAdd() {
      this.dialogVisible = true;
    },

    dialogVisibleConfirm() {
      // 新增接口
      let that = this.formContactData;

      this.$axios
        .post(`http://localhost:8001/se/person/addContactInfo`, {
          params: that,
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((result) => {
          console.log("新增联系人成功");
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
.el-container .el-main {
  padding: 0 !important;
}
</style>